昨天我已經了解兩個Vue.js中常用的指令今天將學習剩下的指令並嘗試它們的功能。

常見指令

3. 'v-for': 它通常用於迭代數據，例如: 遍歷數組或指定對象中的數據，並產生對應的HTML元素。
   Ex. 列出最受歡迎的家貓品種

  <div id="app">
    <h1>最受歡迎的貓咪品種</h1>
    <ul>
      <li v-for="breed in catBreeds">{{ breed }}</li>
    </ul>
  </div>

    var app = new Vue({
      el: '#app',
      data: {
        catBreeds: ['波斯貓', '英國短毛貓', '緬因貓', '豹貓','布偶貓']
      }
    });

網頁呈現:

4. 'v-if' & 'v-else': 用於條件渲染，如果條件為true則執行'v-if'的動作，若為false則執行'v-else'的動作。
   Ex. 若登入條件為true則顯示歡迎的字串

  <div id="logIn">
    <p v-if="isLoggedIn">hello, 會員！ 歡迎您再次登入 ^_^</p>
    <p v-else>我們需要您先登錄喔~</p>
  </div>

條件為true(v-if):

    var app = new Vue({
      el: '#logIn',
      data: {
        isLoggedIn: true
      }
    });

網頁呈現:

條件為false(v-else):

    var app = new Vue({
      el: '#logIn',
      data: {
        isLoggedIn: false
      }
    });

網頁呈現:

5. 'v-on': 用於監聽DOM事件，例如: 點擊、輸入、鼠標移動等。指令被觸發時，對應的程式內容將被執行。
   Ex. 讓使用者點及按鈕就會跳出彈跳視窗

  <div id="app">
    <button v-on:click="popUpWindow">Try to click it!</button>
  </div>

    var app = new Vue({
      el: '#app',
      methods: {
        popUpWindow: function () {
          alert('Thank you for trying!');
        }
      }
    });

網頁呈現:

今天完成了介紹與嘗試Vue.js的五個常見指令，明天我會嘗試用這些指令建立一個簡單可以操作的網站，謝謝閱讀。